import React from 'react'
import { Card, Button, Icon, message, Tabs } from 'antd'
import './ui.less'
const TabPane = Tabs.TabPane;

export default class Loadings extends React.Component {

    newTabIndex = 0;
    handlecallback = (key) => {
        message.info("Hi!,您选择了页签：" + key)
    }

    componentWillMount() {
        const panes = [
            {
                title: 'tab 1',
                content: 'tab 1',
                key: '1'
            },
            {
                title: 'tab 2',
                content: 'tab 2',
                key: '2'
            },
            {
                title: 'tab 3',
                content: 'tab 3',
                key: '3'
            },
        ]
        this.setState({
            activeKey: panes[0].key,
            panes,
        })
    }

    onChange = activeKey => {
        this.setState({ activeKey });
    };

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };

    add = () => {
        const { panes } = this.state;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: activeKey, content: 'Content of '+'_'+activeKey, key: activeKey });
        this.setState({ panes, activeKey });
    };

    remove = targetKey => {
        let { activeKey } = this.state;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
                activeKey = panes[lastIndex].key;
            } else {
                activeKey = panes[0].key;
            }
        }
        this.setState({ panes, activeKey });
    };

    render() {

        return (
            <div>
                <Card title="Tab页签" className="card-warp">
                    <Tabs
                        defaultActiveKey="1"
                        onChange={this.handlecallback}

                    >
                        <TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="1">
                            Content of Tab Pane 1
                        </TabPane>
                        <TabPane tab={<span><Icon type="edit" />Tab 2</span>} key="2" disabled>
                            Content of Tab Pane 2
                        </TabPane>
                        <TabPane tab={<span><Icon type="delete" />Tab 2</span>} key="3">
                            Content of Tab Pane 3
                        </TabPane>
                    </Tabs>
                </Card>

                <Card title="Tab页签" className="card-warp">
                    <Tabs defaultActiveKey="1" onChange={this.handlecallback}>
                        {
                            this.state.panes.map((panes) => {
                                return <TabPane
                                    tab={panes.title}
                                    key={panes.key}
                                />
                            })
                        }
                    </Tabs>
                </Card>

                <Card title="Tab页签" className="card-warp">
                    <Tabs
                        onChange={this.onChange}
                        activeKey={this.state.activeKey}
                        type="editable-card"
                        onEdit={this.onEdit}
                    >
                        {this.state.panes.map(panes => (
                            <TabPane tab={panes.title} key={panes.key} closable={panes.closable}>
                                {panes.content}
                            </TabPane>
                        ))}
                    </Tabs>
                </Card>

            </div>
        );
    }
}
